<template>
	<view class="modules-box-wrap card">
		<view class="head">
			<view class="tit">证据链</view>
		</view>
		<view class="modules-box">
			<view class="item" v-for="(moduleItem, index) in list" :key="moduleItem.value"
				@click="toModuleList('./module-list', moduleItem, index)">
				<ModuleCardItem class="card" :row-data="moduleItem">
					<template v-slot:tips>
						<view style="min-width: 112rpx;">文件数量</view>
					</template>
				</ModuleCardItem>
			</view>
		</view>
	</view>
</template>
<script>
import {
	MODULE_COLORS
} from '@/const/modules';
import ModuleCardItem from './ModuleCardItem.vue'
export default {
	name: 'DetailMainCard',
	props: {
		list: {
			type: Array,
			required: true
		},
		archivesInfo: {
			type: Object,
			default: () => { }
		}
	},
	components: {
		ModuleCardItem
	},
	computed: {
		modulesColor() {
			return val => {
				return MODULE_COLORS[val];
			};
		},
	},
	methods: {
		toModuleList(url, item, index) {
			const { name, archivesId, archivesType, localStatus, syncStatus } = this.archivesInfo
			const path =
				`?title=${name}&archivesId=${archivesId}&archivesType=${archivesType}&dictId=${item.value}&currentIndex=${index}&syncStatus=${syncStatus}`;
			uni.setStorage({
				key: 'moduleListUrl',
				data: path
			});
			uni.navigateTo({
				url: url + path
			});
		},
	}
}
</script>

<style scoped lang="scss">
.modules-box-wrap {
	height: 100%;
	background-color: #fff;
	padding: 32rpx 32rpx;
	padding-top: 4rpx;

	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #E4E4E4;

		.tit {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.modules-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: -16rpx;
		margin-right: -16rpx;

		.item {
			flex: 0 0 50%;
			min-width: 50%;
			padding: 16rpx;
		}
	}
}
</style>